import React, { Component } from 'react';
// 快捷键： rcc快速生成一个类组件
/*
  学习目标：掌握React中给元素绑定事件

  语法：
    1. on+驼峰事件名= {箭头函数}
    2. on+驼峰事件名= {this.方法名}

  注意：
   1. React中事件绑定的是函数， 而不能是函数的调用 

*/

export default class App extends Component {
  // 多行代码
  // 2.1 render同级定义函数
  handleClick() {
    console.log('123  ----->  ', 123);
    alert('多行代码点我干啥');
  }

  render() {
    return (
      <div>
        {/* 1. 少量代码 -绑定给一个箭头函数 */}
        <button onClick={() => alert('点我干啥')}>点我-少量代码</button>

        {/* 2.2 多行代码通过this.方法名, 绑定 */}
        <button onClick={this.handleClick}>点我-多行代码</button>

        {/* // ! 1. React中事件绑定的是函数， 而不能是函数的调用  */}
        {/* ❌ <button onClick={this.handleClick}>点我-多行代码</button> */}
      </div>
    );
  }
}
